<style>


    /**** 内容 *****/
    .privacy-card {
        background-color: white;
        border-radius: 12px;
        box-shadow: var(--shadow);
        padding: 2.5rem;
        margin-bottom: 2rem;
    }

    .privacy-card .page-title {
        font-size: 2rem;
        font-weight: 700;
        margin-bottom: 1.5rem;
        color: var(--dark);
        text-align: center;
    }

    .privacy-card .privacy-meta {
        text-align: center;
        color: var(--gray);
        font-size: 0.9rem;
        margin-bottom: 2.5rem;
        padding-bottom: 1.5rem;
        border-bottom: 1px solid var(--border);
    }

    .privacy-card .privacy-section {
        margin-bottom: 2.5rem;
    }

    .privacy-card .section-heading {
        font-size: 1.3rem;
        font-weight: 600;
        margin-bottom: 1rem;
        color: var(--primary);
    }

    .privacy-card .section-subheading {
        font-size: 1.1rem;
        font-weight: 600;
        margin-top: 1.5rem;
        margin-bottom: 0.75rem;
    }

    .privacy-card .privacy-text {
        margin-bottom: 1rem;
        color: #4B5563;
    }

    .privacy-card .privacy-list {
        padding-left: 1.5rem;
        margin-bottom: 1.5rem;
    }

    .privacy-card .privacy-list li {
        margin-bottom: 0.75rem;
        color: #4B5563;
    }

    .privacy-card .highlight {
        background-color: var(--primary-light);
        padding: 2px 4px;
        border-radius: 4px;
        font-weight: 500;
    }

    .privacy-card .privacy-features {
        background-color: var(--primary-light);
        border-radius: 8px;
        padding: 1.5rem;
        margin: 1.5rem 0;
    }

    .privacy-card .feature-item {
        display: flex;
        align-items: flex-start;
        margin-bottom: 1rem;
    }

    .privacy-card .feature-item:last-child {
        margin-bottom: 0;
    }

    .privacy-card .feature-icon {
        color: var(--primary);
        margin-right: 10px;
        margin-top: 4px;
    }

    /**** 操作区域 *****/
    .action-section {
        background-color: white;
        border-radius: 12px;
        box-shadow: var(--shadow);
        padding: 2rem;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 1.5rem;
    }

    .action-section .action-buttons {
        display: flex;
        gap: 1rem;
    }

    .action-section .btn {
        padding: 10px 24px;
        border-radius: 8px;
        font-weight: 500;
        transition: all 0.2s;
    }

    .action-section .btn-primary {
        background-color: var(--primary);
        border-color: var(--primary);
    }

    .action-section .btn-primary:hover {
        background-color: #0E42D2;
        border-color: #0E42D2;
    }

    .action-section .btn-secondary {
        background-color: white;
        color: var(--dark);
        border: 1px solid var(--border);
    }

    .action-section .btn-secondary:hover {
        background-color: var(--light);
    }

    /**** 导航 *****/
    .privacy-navigation {
        position: sticky;
        top: 20px;
        background-color: white;
        border-radius: 8px;
        box-shadow: var(--shadow);
        padding: 1.5rem;
        height: fit-content;
    }

    .privacy-navigation .nav-title {
        font-weight: 600;
        margin-bottom: 1rem;
        padding-bottom: 0.75rem;
        border-bottom: 1px solid var(--border);
    }

    .privacy-navigation .nav-list {
        list-style: none;
        padding: 0;
    }

    .privacy-navigation .nav-item {
        margin-bottom: 0.5rem;
    }

    .privacy-navigation .nav-link {
        color: var(--gray);
        text-decoration: none;
        display: block;
        padding: 5px 8px;
        border-radius: 4px;
        transition: all 0.2s;
        font-size: 0.9rem;
    }

    .privacy-navigation .nav-link:hover, .privacy-navigation .nav-link.active {
        color: var(--primary);
        background-color: var(--primary-light);
    }

    @media (max-width: 768px) {
        .privacy-card {
            padding: 1.5rem;
        }

        .page-title {
            font-size: 1.75rem;
        }

        .privacy-navigation {
            display: none;
        }

        .action-section .action-buttons {
            flex-direction: column;
            width: 100%;
        }

        .action-section .btn {
            width: 100%;
        }
    }
</style>

<div class="container">
    <div class="row">
        <!-- 隐私政策导航 -->
        <div class="col-md-3 d-none d-md-block">
            <div class="privacy-navigation">
                <div class="nav-title">目录</div>
                <ul class="nav-list">
                    <li class="nav-item"><a href="#intro" class="nav-link active">隐私政策介绍</a></li>
                    <li class="nav-item"><a href="#collection" class="nav-link">信息收集范围</a></li>
                    <li class="nav-item"><a href="#usage" class="nav-link">信息使用方式</a></li>
                    <li class="nav-item"><a href="#sharing" class="nav-link">信息共享规则</a></li>
                    <li class="nav-item"><a href="#protection" class="nav-link">信息保护措施</a></li>
                    <li class="nav-item"><a href="#rights" class="nav-link">用户权利说明</a></li>
                    <li class="nav-item"><a href="#cookies" class="nav-link">Cookie使用政策</a></li>
                    <li class="nav-item"><a href="#third-party" class="nav-link">第三方服务声明</a></li>
                    <li class="nav-item"><a href="#updates" class="nav-link">政策更新说明</a></li>
                    <li class="nav-item"><a href="#contact" class="nav-link">联系与反馈</a></li>
                </ul>
            </div>
        </div>

        <!-- 隐私政策内容 -->
        <div class="col-md-9">
            <div class="privacy-card">
                <h1 class="page-title">隐私政策</h1>
                <div class="privacy-meta">
                    生效日期：2023年10月1日 | 版本号：V2.1
                </div>

                <!-- 隐私政策介绍 -->
                <section id="intro" class="privacy-section">
                    <h2 class="section-heading">1. 隐私政策介绍</h2>
                    <p class="privacy-text">
                        本隐私政策旨在向您说明我们如何收集、使用、存储、保护及共享您的个人信息，以及您对您的个人信息所享有的权利。请您在使用我们的社交平台服务（以下简称"本服务"）前，仔细阅读并理解本隐私政策的全部内容。
                    </p>
                    <p class="privacy-text">
                        您使用或继续使用本服务，即表示您同意我们按照本隐私政策收集、使用、存储和分享您的信息。如您不同意本隐私政策的任何内容，请您立即停止使用本服务。
                    </p>
                    <div class="privacy-features">
                        <div class="feature-item">
                            <i class="fas fa-shield-alt feature-icon"></i>
                            <div>我们重视您的隐私保护，采用行业标准的安全技术保护您的个人信息</div>
                        </div>
                        <div class="feature-item">
                            <i class="fas fa-user-circle feature-icon"></i>
                            <div>您可以随时控制您的个人信息，包括查看、更正和删除您的信息</div>
                        </div>
                        <div class="feature-item">
                            <i class="fas fa-balance-scale feature-icon"></i>
                            <div>我们仅在法律允许和必要的范围内收集和使用您的个人信息</div>
                        </div>
                    </div>
                </section>

                <!-- 信息收集范围 -->
                <section id="collection" class="privacy-section">
                    <h2 class="section-heading">2. 信息收集范围</h2>
                    <p class="privacy-text">
                        为了向您提供更好的服务，我们可能会收集以下类型的信息：
                    </p>

                    <h3 class="section-subheading">2.1 您主动提供的信息</h3>
                    <p class="privacy-text">
                        当您注册账号、完善个人资料、使用特定功能或参与活动时，您主动向我们提供的信息，包括但不限于：
                    </p>
                    <ul class="privacy-list">
                        <li>账号注册信息：如手机号码、电子邮箱、密码等</li>
                        <li>个人资料信息：如姓名、头像、性别、年龄、生日、地区、个人简介等</li>
                        <li>内容信息：如您发布的动态、评论、私信、上传的图片或视频等</li>
                        <li>反馈信息：如您通过客服或反馈渠道向我们提交的意见、建议等</li>
                    </ul>

                    <h3 class="section-subheading">2.2 我们自动收集的信息</h3>
                    <p class="privacy-text">
                        当您使用本服务时，我们可能自动收集的信息，包括但不限于：
                    </p>
                    <ul class="privacy-list">
                        <li>设备信息：如设备型号、操作系统、唯一设备标识符、网络设备硬件地址等</li>
                        <li>使用信息：如您使用本服务的时间、地点、频率、浏览历史、点击记录等</li>
                        <li>位置信息：如您授权我们获取的地理位置信息（您可以随时关闭位置权限）</li>
                        <li>日志信息：如IP地址、浏览器类型、访问日期和时间等</li>
                    </ul>
                </section>

                <!-- 信息使用方式 -->
                <section id="usage" class="privacy-section">
                    <h2 class="section-heading">3. 信息使用方式</h2>
                    <p class="privacy-text">
                        我们可能将收集到的信息用于以下目的：
                    </p>
                    <ul class="privacy-list">
                        <li>为您提供并维护本服务，确保服务的正常运行</li>
                        <li>识别您的身份，验证您的账号信息，保障您的账号安全</li>
                        <li>为您提供个性化的服务和内容推荐，提升您的使用体验</li>
                        <li>开发、优化和改进我们的服务功能和内容</li>
                        <li>向您发送重要通知，如服务变更、安全提醒等</li>
                        <li>开展用户调研和数据分析，了解用户需求和使用习惯</li>
                        <li>处理您的反馈和投诉，解决您在使用过程中遇到的问题</li>
                        <li>防范、检测和打击欺诈、违规行为，保护用户和平台的合法权益</li>
                        <li>符合法律法规规定或应政府部门要求的其他用途</li>
                    </ul>
                    <p class="privacy-text">
                        我们将在实现上述目的所必需的范围内使用您的个人信息，如超出上述范围使用您的个人信息，我们将另行获得您的同意。
                    </p>
                </section>

                <!-- 信息共享规则 -->
                <section id="sharing" class="privacy-section">
                    <h2 class="section-heading">4. 信息共享规则</h2>
                    <p class="privacy-text">
                        我们重视您的个人信息安全，不会随意向第三方分享您的个人信息，但在以下情况下，我们可能会分享您的信息：
                    </p>
                    <ul class="privacy-list">
                        <li>获得您明确同意的情况下，向第三方分享您的信息</li>
                        <li>为了提供您所要求的服务，而必须与提供该服务的第三方共享您的信息</li>
                        <li>根据法律法规的规定、司法机关或行政主管部门的要求，向其提供您的信息</li>
                        <li>为了保护我们的合法权益、用户的生命财产安全或社会公共利益，在合理必要的范围内分享您的信息</li>
                        <li>与我们的关联公司共享您的信息，以便为您提供更完善的服务（我们将要求关联公司遵守本隐私政策）</li>
                        <li>在公司合并、收购、资产转让或类似交易中，您的信息可能作为资产的一部分被转移</li>
                    </ul>
                    <p class="privacy-text">
                        对于我们与之共享信息的第三方，我们会要求其遵守相关法律法规和保密义务，并采取必要的安全措施保护您的信息。
                    </p>
                </section>

                <!-- 信息保护措施 -->
                <section id="protection" class="privacy-section">
                    <h2 class="section-heading">5. 信息保护措施</h2>
                    <p class="privacy-text">
                        我们采取多种安全技术和措施保护您的个人信息，防止其被未经授权的访问、使用、泄露、篡改或损坏，包括但不限于：
                    </p>
                    <ul class="privacy-list">
                        <li>采用加密技术保护您的敏感信息，如密码等</li>
                        <li>建立严格的访问控制机制，限制内部人员对您信息的访问</li>
                        <li>定期进行安全评估和漏洞测试，及时修复安全隐患</li>
                        <li>制定完善的安全事件响应预案，应对可能发生的信息安全事件</li>
                        <li>对员工进行隐私保护和信息安全培训，提高员工的安全意识</li>
                    </ul>
                    <p class="privacy-text">
                        尽管我们采取了上述安全措施，但请您理解，互联网环境并非绝对安全，我们不能保证您的信息绝对安全。您应妥善保管您的账号信息，不要向他人泄露您的密码等敏感信息。
                    </p>
                </section>

                <!-- 用户权利说明 -->
                <section id="rights" class="privacy-section">
                    <h2 class="section-heading">6. 用户权利说明</h2>
                    <p class="privacy-text">
                        您对您的个人信息享有以下权利：
                    </p>

                    <h3 class="section-subheading">6.1 访问和更正权</h3>
                    <p class="privacy-text">
                        您有权访问您的个人信息，并在发现信息有误时进行更正。您可以通过以下方式行使该权利：
                    </p>
                    <ul class="privacy-list">
                        <li>登录您的账号，在"个人设置"中查看和修改您的个人资料</li>
                        <li>通过客服渠道联系我们，要求访问或更正您的个人信息</li>
                    </ul>

                    <h3 class="section-subheading">6.2 删除权</h3>
                    <p class="privacy-text">
                        在以下情况下，您有权要求我们删除您的个人信息：
                    </p>
                    <ul class="privacy-list">
                        <li>我们收集、使用您的信息违反了法律法规的规定</li>
                        <li>我们不再需要您的信息来提供服务</li>
                        <li>您注销了账号</li>
                        <li>您撤回了对信息收集和使用的同意</li>
                    </ul>

                    <h3 class="section-subheading">6.3 撤回同意权</h3>
                    <p class="privacy-text">
                        您有权撤回对信息收集和使用的同意。您可以通过以下方式撤回同意：
                    </p>
                    <ul class="privacy-list">
                        <li>在设备的设置中修改应用权限</li>
                        <li>在平台的设置中关闭相关功能</li>
                        <li>通过客服渠道通知我们撤回同意</li>
                    </ul>
                    <p class="privacy-text">
                        请注意，撤回同意可能导致某些功能无法正常使用，但不会影响我们在您撤回同意前基于您的同意已进行的信息处理活动的合法性。
                    </p>

                    <h3 class="section-subheading">6.4 账号注销权</h3>
                    <p class="privacy-text">
                        您有权注销您的账号。账号注销后，我们将停止为您提供服务，并根据相关法律法规的要求删除或匿名化处理您的个人信息，法律法规另有规定的除外。您可以在"账号设置"中找到账号注销入口，或联系客服协助您完成注销。
                    </p>
                </section>

                <!-- Cookie使用政策 -->
                <section id="cookies" class="privacy-section">
                    <h2 class="section-heading">7. Cookie使用政策</h2>
                    <p class="privacy-text">
                        为了给您提供更好的服务体验，我们可能会使用Cookie和类似技术。Cookie是一种小型数据文件，会被存储在您的设备上，用于识别您的设备、记住您的偏好等。
                    </p>
                    <p class="privacy-text">
                        我们使用Cookie主要用于以下目的：
                    </p>
                    <ul class="privacy-list">
                        <li>使您能够登录和使用我们的服务</li>
                        <li>记住您的设置和偏好，为您提供个性化服务</li>
                        <li>分析您的使用习惯，改进我们的服务</li>
                        <li>检测和防范欺诈行为，保障服务安全</li>
                    </ul>
                    <p class="privacy-text">
                        您可以通过浏览器设置禁用Cookie，但这可能会影响您使用本服务的部分功能。有关如何更改浏览器Cookie设置的信息，请参考您使用的浏览器的帮助文档。
                    </p>
                </section>

                <!-- 第三方服务声明 -->
                <section id="third-party" class="privacy-section">
                    <h2 class="section-heading">8. 第三方服务声明</h2>
                    <p class="privacy-text">
                        本服务可能包含指向第三方网站或服务的链接，或集成了第三方提供的功能（如地图服务、支付服务等）。这些第三方服务有其独立的隐私政策，我们不对这些第三方服务的隐私保护措施负责。
                    </p>
                    <p class="privacy-text">
                        当您使用这些第三方服务时，您的信息可能会被第三方收集。我们建议您在使用这些第三方服务前，仔细阅读其隐私政策，了解其信息收集和使用规则。
                    </p>
                </section>

                <!-- 政策更新说明 -->
                <section id="updates" class="privacy-section">
                    <h2 class="section-heading">9. 政策更新说明</h2>
                    <p class="privacy-text">
                        我们可能会根据法律法规的变化、服务的更新或其他合理原因，对本隐私政策进行修改。修改后的隐私政策将在平台公告后生效，并更新生效日期和版本号。
                    </p>
                    <p class="privacy-text">
                        如您继续使用本服务，即表示您已阅读并同意修改后的隐私政策。如您不同意修改后的隐私政策，您应立即停止使用本服务。对于重大变更，我们将通过平台公告、站内信等方式提前通知您。
                    </p>
                </section>

                <!-- 联系与反馈 -->
                <section id="contact" class="privacy-section">
                    <h2 class="section-heading">10. 联系与反馈</h2>
                    <p class="privacy-text">
                        如您对本隐私政策有任何疑问，或需要行使您的权利，或举报隐私问题，请通过以下方式联系我们：
                    </p>
                    <ul class="privacy-list">
                        <li>隐私专线：400-123-4567 转 8（工作日 9:00-18:00）</li>
                        <li>隐私邮箱：privacy@socialplatform.com</li>
                        <li>平台内反馈：我的 > 设置 > 隐私反馈</li>
                        <li>邮寄地址：北京市朝阳区科技园区88号社交大厦 隐私保护部（收）</li>
                    </ul>
                    <p class="privacy-text">
                        我们将在收到您的反馈后15个工作日内给予回复。
                    </p>
                </section>
            </div>

            <!-- 操作区域 -->
            <div class="action-section">
                <div class="agreement-check">
                    <input class="form-check-input" type="checkbox" id="agreePrivacy">
                    <label class="form-check-label" for="agreePrivacy">
                        我已阅读并同意上述隐私政策
                    </label>
                </div>

                <div class="action-buttons">
                    <button type="button" class="btn btn-secondary" id="cancelBtn">取消</button>
                    <button type="button" class="btn btn-primary" id="confirmBtn" disabled>确认同意</button>
                </div>
            </div>
        </div>
    </div>
</div>


<script>
	// 导航链接点击事件
	document.querySelectorAll('.nav-link').forEach(link => {
		link.addEventListener('click', function (e) {
			e.preventDefault();

			// 移除所有激活状态
			document.querySelectorAll('.nav-link').forEach(item => {
				item.classList.remove('active');
			});

			// 添加当前激活状态
			this.classList.add('active');

			// 滚动到对应部分
			const targetId = this.getAttribute('href');
			const targetElement = document.querySelector(targetId);

			if (targetElement) {
				window.scrollTo({
					top: targetElement.offsetTop - 20,
					behavior: 'smooth'
				});
			}
		});
	});

	// 监听滚动，更新导航激活状态
	window.addEventListener('scroll', function () {
		const sections = document.querySelectorAll('.privacy-section');
		const navLinks = document.querySelectorAll('.nav-link');

		let currentSectionId = '';

		sections.forEach(section => {
			const sectionTop = section.offsetTop;
			const sectionHeight = section.clientHeight;

			if (window.scrollY >= sectionTop - 100) {
				currentSectionId = section.getAttribute('id');
			}
		});

		navLinks.forEach(link => {
			link.classList.remove('active');
			if (link.getAttribute('href') === `#${currentSectionId}`) {
				link.classList.add('active');
			}
		});
	});

	// 隐私政策同意 checkbox 事件
	const agreeCheckbox = document.getElementById('agreePrivacy');
	const confirmBtn = document.getElementById('confirmBtn');

	agreeCheckbox.addEventListener('change', function () {
		confirmBtn.disabled = !this.checked;
	});

	// 确认按钮事件
	confirmBtn.addEventListener('click', function () {
		// 在实际应用中，这里会记录用户的同意状态
		alert('您已同意隐私政策，感谢您的信任。');
		window.history.back();
	});

	// 取消按钮事件
	document.getElementById('cancelBtn').addEventListener('click', function () {
		window.history.back();
	});
</script>

